<template>
  <view class="container">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
    <block slot="top">
      <view class="tabs">
        <view class="tab-item" :class="currentIndex==index?'active':''" @click="setIndex(index)"
          v-for="(item, index) in tabsList" :key="index">
          {{item.name}}
        </view>
      </view>
    </block>
    <view class="main">
      <view class="order-warpper">
        <view class="order-item" @click="toDetail(item)" v-for="(item, index) in dataList" :key="index">
         <view class="statusInfo" v-if="item.refund.length>0 && item._status._type != -2">
            退款中
          </view>
          <view class="statusInfo" v-else>
            {{item._status._type<0?'已退款':statusEnum[item._status._type]}}
          </view>
          <view class="order-item-tp">
            <view class="order-label">
              订单编号：
            </view>
            <view class="order-line">
              <view class="orderNo">
                {{item.order_id}}
              </view>
              <view class="usePayTime" v-if="item._status._type == 0">
                剩余支付时长: <uv-count-down :time="item.timeStamp" format="HH:mm:ss"></uv-count-down>
              </view>
            </view>
          </view>
          <view class="order-item-mid">
            <view class="goodsList" v-for="(itemc, indexc) in item.cartInfo" :key="indexc">
              <image class="goodsImg" :src="itemc.productInfo.image" mode=""></image>
              <view class="goodsInfo">
                <view class="goodsName text-twoline-ellipsis">{{itemc.productInfo.store_name}}</view>
                <view class="sukName" style="font-weight: 400;font-size: 24rpx;color: #999999;">
                  规格值：{{itemc.attrInfo.suk}}
                </view>
                <view class="foot">
                  <view class="price">
                    ￥{{itemc.productInfo.price}}
                  </view>
                  <view class="count">
                    x{{itemc.cart_num}}
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="order-item-bom">
            <view class="fl" v-if="item._status._type == 0">
              <text class="label">
                待付款:
              </text>
              <text class="value">
                ￥{{item.pay_price}}
              </text>
            </view>
            <view class="fr">
              <view class="btn1" v-if="item._status._type == 0" @click.stop="cancel(item)">取消订单</view>
              <view class="btn2" v-if="item._status._type == 0" @click.stop="toPay(item)">去支付</view>
              <view class="btn2" v-if="item._status._type == 1 && item.refund.length == 0" @click.stop="toRefund(item)">
                申请退款</view>
                <view class="btn2" v-if="item._status._type == 2 && item.refund.length == 0" @click.stop="toRefund(item)">
                  申请退款</view>
              <view class="btn2" v-if="item._status._type == 2" @click.stop="receipt(item)">确认收货</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    </z-paging>
    <uv-modal ref="modal" title="确认取消订单吗？" :showCancelButton="true" @confirm="confirm"></uv-modal>
    <uv-modal ref="modal2" title="确认收货吗？" :showCancelButton="true" @confirm="confirm2"></uv-modal>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        tabsList: [{
            name: "全部",
            value: ""
          },
          {
            name: "待付款",
            value: 0
          },
          {
            name: "待发货",
            value: 1
          },
          {
            name: "待收货",
            value: 2
          },
          {
            name: "已完成",
            value: 4
          },
          {
            name: "已退款",
            value: -2
          }
        ],
        columns: [
          [{
            name: "微信",
            value: "weixin"
          }]
        ],
        statusEnum: {
          0: "待付款",
          1: "待发货",
          2: "待收货",
          3: "待评价",
          4: "已完成"
        },
        currentIndex: 0,
        dataList: [
          // {
          //   _status: {
          //     _type: 0
          //   },
          //   refund: [],
          //   order_id: "hd516561",
          //   timeStamp: 1515555,
          //   cartInfo: [
          //     {
          //       productInfo: {
          //         image: "/static/images/cate.png",
          //         store_name: "元槲｜天麻原浆本草｜精道心眠 养生佳品适合中老年人",
          //         price: "68"
          //       },
          //       attrInfo: {
          //         suk: "5kg 白色"
          //       },
          //       cart_num: 1,
          //       pay_price: "15",
          //     }
          //   ]
          // }
        ],
        params: {
          type: "",
          page: 1,
          limit: 10
        },
        payParams: {
          uni: "", //订单编号
          paytype: "" //支付方式
        }
      }
    },
    onShow() {
      this.$nextTick(() => {
        this.$refs.paging.refresh();
      })
      // uni.setLocale('zh-Hans');
    },
    onLoad(option) {
      if(option.index){
        this.currentIndex = option.index;
        this.params.type = this.tabsList[option.index].value;
      }
    },
    methods: {
      queryList(pageNo, pageSize) {
        this.params.page = pageNo;
        this.params.limit = pageSize;
        reqApi.orderList(this.params).then(res => {
          console.log("订单列表", res);
          if(res.data && res.data.length>0){
            res.data.forEach(v=>{
              v.timeStamp = v.stop_time*1000 - new Date().getTime();
            })
          }
          this.$refs.paging.complete(res.data);
        })
      },
      toPay(item) {
        uni.navigateTo({
          url: `/pages/home/cashier?id=${item.order_id}`
        })
      },
      cancel(item) {
        this.payParams.uni = item.order_id;
        this.$refs.modal.open();
      },
      receipt(item){
        this.payParams.uni = item.order_id;
        this.$refs.modal2.open();
      },
      confirm2(){
        console.log('确定收货');
        reqApi.takeOrder({uni: this.payParams.uni}).then(res=>{
          this.$refs.modal2.close();
          uni.showToast({
            title: "收货成功",
            icon: 'none',
            mask: true,
            duration: 1000,
          })
          setTimeout(() => {
            this.$refs.paging.refresh();
          }, 1000)
        })
        
      },
      confirm() {
        console.log('确定取消');
        reqApi.cancelOrder({
          id: this.payParams.uni
        }).then(res => {
          uni.showToast({
            title: "取消成功",
            icon: 'none',
            mask: true,
            duration: 1000,
          })
          setTimeout(() => {
            this.$refs.paging.refresh();
          }, 1000)
        })
      },
      setIndex(index) {
        this.currentIndex = index;
        this.params.type  = this.tabsList[index].value;
        this.$refs.paging.refresh();
      },
      toDetail(item) {
        uni.navigateTo({
          url: `/pages/mine/orderDetail?id=${item.order_id}`
        })
      },
      toRefund(item) {
        uni.navigateTo({
          url: `/pages/mine/refund?orderNo=${item.order_id}&id=${item.id}`
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .main {
    padding: 30rpx;
    box-sizing: border-box;

    .order-warpper {
      .order-item {
        margin-bottom: 30rpx;
        padding: 30rpx;
        box-sizing: border-box;
        background: #fff;
        border-radius: 30rpx;
        position: relative;

        .statusInfo {
          width: 154rpx;
          height: 50rpx;
          background: #FFF3E9;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 24rpx;
          color: #FF8A23;
          text-align: center;
          line-height: 50rpx;
          border-radius: 0 30rpx 0 30rpx;
          position: absolute;
          right: 0;
          top: 0;
        }

        .order-item-tp {
          .order-label {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #666666;
          }

          .order-line {
            display: flex;
            justify-content: space-between;

            .orderNo {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #333;
            }

            .usePayTime {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #EA2222;
              display: flex;
              align-items: center;
            }
          }
        }

        .order-item-mid {
          .goodsList {
            padding: 20rpx;
            box-sizing: border-box;
            border-radius: 30rpx;
            background: #F7F8FA;
            display: flex;
            margin-top: 30rpx;

            .goodsImg {
              width: 160rpx;
              height: 160rpx;
              border-radius: 20rpx;
              margin-right: 20rpx;
            }

            .goodsInfo {
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-around;

              .goodsName {
                font-family: PingFang SC, PingFang SC;
                font-weight: bold;
                font-size: 24rpx;
                color: #333333;
              }

              .foot {
                display: flex;
                justify-content: space-between;

                .price {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: bold;
                  font-size: 24rpx;
                  color: #EA2222;
                }

                .count {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #333333;
                }
              }
            }
          }
        }

        .order-item-bom {
          display: flex;
          align-items: center;
          margin-top: 30rpx;

          .fl {
            display: flex;
            align-items: center;

            .label {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #333333;
            }

            .value {
              font-family: PingFang SC, PingFang SC;
              font-weight: bold;
              font-size: 32rpx;
              color: #EA2222;
            }
          }

          .fr {
            flex: 1;
            display: flex;
            justify-content: flex-end;

            .btn1 {
              width: 136rpx;
              height: 64rpx;
              border-radius: 74rpx;
              border: 2rpx solid #EA7222;
              font-family: PingFang SC, PingFang SC;
              font-weight: bold;
              font-size: 24rpx;
              color: #EA7222;
              text-align: center;
              line-height: 64rpx;
            }

            .btn2 {
              width: 140rpx;
              height: 64rpx;
              background: linear-gradient(270deg, #FF3C21 0%, #EA7222 100%);
              border-radius: 74rpx;
              font-family: PingFang SC, PingFang SC;
              font-weight: bold;
              font-size: 24rpx;
              color: #FFFFFF;
              text-align: center;
              line-height: 64rpx;
              margin-left: 30rpx;
            }
          }
        }
      }
    }
  }

  .active {
    color: #FF8A23 !important;
  }

  .active::after {
    position: absolute;
    content: " ";
    width: 25rpx;
    height: 6rpx;
    background: #FF8A23;
    border-radius: 110rpx;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .container {
    .tabs {
      display: flex;
      background: #fff;

      .tab-item {
        height: 88rpx;
        flex: 1;
        line-height: 88rpx;
        text-align: center;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;
        text-align: center;
        position: relative;
      }
    }
  }
</style>